<html lang="en" class="login-content" data-ng-app="materialAdmin">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>myhouse 住户登入</title>
	<link rel="shortcut icon" type="image/x-icon" href="../../../../../system-web/src/main/resources/static/favicon.ico" />
	<!-- Vendor CSS -->
	<link href="/login/css/material-design-iconic-font/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css">
	<!-- CSS -->
	<link href="/login/css/app.min.1.css" rel="stylesheet" type="text/css">
	<link href="/xtiper_css/xtiper.css" rel="stylesheet" type="text/css"/>
	<script src="/configjs/config.js"></script>
	<style type="text/css">

		/*验证方式的样式*/
		select#selectTravelCity
		{
			width                    : 14em;
			height                   : 2.5em;
			padding                  : 0.2em 0.4em 0.2em 0.4em;
			vertical-align           : middle;
			border                   : 3px solid #94c1e7;
			-moz-border-radius       : 0.2em;
			-webkit-border-radius    : 0.2em;
			border-radius            : 0.2em;
			-webkit-appearance       : none;
			-moz-appearance          : none;
			appearance               : none;
			background               : #ffffff;
			font-family              : SimHei;
			font-size                : 1.1em;
			color                    : RGBA(102,102,102,0.7);
			cursor                   : pointer;
			margin-right: 150px;
		}
	</style>
</head>
<body class="login-content" data-ng-controller="loginCtrl as lctrl">
<span id="vuebox">
	 <!--登录-->
 <div class="lc-block center-block"  id="l-login" data-ng-class="{'toggled':lctrl.login === 1}">
	 <h1 class="lean">住户登录</h1>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-account"></i>
    		</span>
		 <div class="fg-line">
			 <input type="text" class="form-control" v-model="userlogin.loginName" placeholder="请输入您的登录账号" regex="^\w{3,16}$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-male"></i>
    		</span>
		 <div class="fg-line">
			 <input type="password" class="form-control" v-model="userlogin.password" placeholder="请输入您的登录密码" regex="^\w+"/>
		 </div>
	 </div>

	 <div class="clearfix"></div>

	 <!--登录按钮-->
	 <button  @click="UserLogin()" class="btn btn-login btn-success btn-float">
		 <i class="zmdi zmdi-arrow-forward"></i>
	 </button>

	 <ul class="login-navigation">
		 未注册?点击此处
		 <li class="bgm-red"  data-ng-click="lctrl.login = 0; lctrl.register = 1">注册</li>
		 忘记密码?
		 <li class="bgm-yellow"  data-ng-click="lctrl.login = 0; lctrl.pwd = 1">忘记密码</li>
	 </ul>

 </div>
	<!--注册-->
 <div class="lc-block" id="l-register" data-ng-class="{'toggled':lctrl.register === 1}" >
	 <h1 class="lean">住户注册</h1>
	 <div class="input-group m-b-20" >
    		<span class="input-group-addon">
    		 <select style="width: 130px" id="selectTravelCity" v-model="type">
				 <option value="2">请选择验证方式</option>
                 <option value="0">手机号</option>
                 <option value="1">邮箱</option>
             </select>
    		</span>
		 <div class="fg-line" style="position:relative">
			 <input style="position:absolute;right:20px;width: 230px" type="text" class="form-control" v-model="regist.registName" placeholder="请输入您的手机号或邮箱"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
				<button type="button" :disabled="!this.codeObj.status" @click="getCode()" class="btn btn-info">{{this.codeObj.title}}</button>
    		</span>
		 <div class="fg-line">
			 <input type="text" class="form-control" v-model="regist.code" placeholder="请输入验证码" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-male"></i>
    		</span>
		 <div class="fg-line">
			 <input type="password" class="form-control" v-model="regist.password"  placeholder="请输入您的注册密码" regex="^\w+"/>
		 </div>
	 </div>

	 <div class="clearfix"></div>


	 <button  @click="registuser()" class="btn btn-login btn-danger btn-float">
		 <i class="zmdi zmdi-arrow-forward"></i>
	 </button>

	 <ul class="login-navigation">
		 前去登入
		 <li data-block="#l-login" class="bgm-green" data-ng-click="lctrl.register = 0; lctrl.login = 1"><button ref="gologin"></button>登入</li>
	 </ul>
 </div>
	<!--忘记密码-->
 <div class="lc-block" id="l-pwd" data-ng-class="{'toggled':lctrl.pwd === 1}">
	 <h1 class="lean">忘记密码</h1>

	 <div class="input-group m-b-20">
    		<span class="input-group-addon">
    			<i class="zmdi zmdi-account"></i>
    		</span>
		 <div class="fg-line">
			 <input type="text" class="form-control" v-model="liverforgetPwdreigstName" placeholder="请输入您的手机号或邮箱" regex="^\w{3,16}$"/>
		 </div>
	 </div>

	 <div class="input-group m-b-20">
		 	<span class="input-group-addon">
				<button type="button" :disabled="!this.codeObj.status" @click="liverLoginforgetPassword()" class="btn btn-info">{{this.codeObj.title}}</button>
    		</span>
		 <div class="fg-line">
			 <input type="password" class="form-control" v-model="liverforgetPwdCode"  placeholder="请输入您的验证码" regex="^\w+"/>
		 </div>
	 </div>

	 <div class="clearfix"></div>

	 <!--重置密码按钮-->
	 <button  @click="liverpasswordreset()" class="btn btn-login btn-warning btn-float">
		 <i class="zmdi zmdi-arrow-forward"></i>
	 </button>

	 <ul class="login-navigation">
		 前去登入
		 <li data-block="#l-login" class="bgm-green" data-ng-click="lctrl.pwd = 0; lctrl.login = 1"><button  ref="gologin"></button>登入</li>
	 </ul>

 </div>

 </span>
</body>
<script src="/login/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/login/js/log.js"></script>
<!-- Angular -->
<script src="/login/js/bower_components/angular/angular.min.js"></script>
<script src="/login/js/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/login/js/bower_components/angular-animate/angular-animate.min.js"></script>
<!-- Angular Modules -->
<script src="/login/js/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/login/js/bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="/login/js/bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="/login/js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<!-- Common js -->
<script src="/login/js/bower_components/angular-nouislider/src/nouislider.min.js"></script>
<script src="/login/js/bower_components/ng-table/dist/ng-table.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="/login/js/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- App level -->
<script src="/login/js/app.js"></script>
<script src="/login/js/controllers/main.js"></script>
<script src="/login/js/controllers/ui-bootstrap.js"></script>
<!-- Template Modules -->
<script src="/login/js/modules/form.js"></script>
<script src="/xtiper_js/xtiper.js"></script>
<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>
<script type="text/javascript">
	var vm1=new Vue({
		el:"#vuebox",
		data:{
			regist:{code:'',password:'',registName:''},
			userlogin:{loginName:'',password:''},
			type:2,
			codeObj:{
				title:"获取验证码",
				status:true,
			},
			liverforgetPwdreigstName:"",
			liverforgetPwdCode:""

		},mounted(){
			if (decodeURIComponent(location.search.slice(1).split("=")[1])!="undefined"){
				this.userlogin.loginName=decodeURIComponent(location.search.slice(1).split("=")[1]);
			}
		},methods:{
			getCode:function(){//获取验证码
				if (this.type==2){
					xtip.msg('请选择验证方式');
					return false;
				}if (this.regist.registName==''){
					xtip.msg('请先输入手机号或邮箱',{times:2});
					return false;
				}if (this.type==0){
					if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.regist.registName))){
						xtip.msg('手机格式不正确',{icon:'w'});
						return false;
					}
				}if (this.type==1){
                        if (!(/^\w+[@]\w+[.][\w.]+$/.test(this.regist.registName))) {
                            xtip.msg('邮箱格式不正确', {icon: 'w'});
                            return false;
                        }
                }
				this.downTime(59);
				loadid=xtip.load('正在发送验证码',{icon:'w'});
				axios.get(link+"liver/sendCode",{params:{registName:this.regist.registName,type:this.type}}).then(
						res=>{
							if(res.data.data.result=="success"){
								xtip.close(loadid);
								xtip.msg("验证码发送成功",{icon:'s'});
							}else{
								xtip.msg("验证码发送失败",{icon:'e'});
								xtip.close(loadid);
							}
						}
				)
			}, /** 倒计时验证码 **/
			downTime(num){//发送验证码,倒计时
				if (this.regist.registName==''){
					xtip.msg('请先输入手机号或邮箱',{times:2});
					return false;
				}
				this.codeObj.title =  num + "秒后重新发送";
				const timer = setInterval(() => {
					num--;
					if (num <= 0) {
						clearInterval(timer);
						this.codeObj.title = "再次获取";
						this.codeObj.status = true;
					} else {
						this.codeObj.title =  num + "秒后重新发送";
						this.codeObj.status = false;
					}
				}, 1000);
				return this.codeObj
			},GoLogin:function(){//进行login页面刷新
				window.location.href="login.html?registName="+this.regist.registName;
			},
			registuser:function () {//住户账号注册
				if (this.regist.registName==''){
					xtip.msg('手机号或邮箱不能为空',{icon:'w'});
					return false;
				}if (this.regist.password==''){
					xtip.msg('密码不能为空',{icon:'w'});
					return false;
				}if (this.regist.code==''){
					xtip.msg('验证码不能为空',{icon:'w'});
					return false;
				}if (this.type==0&&this.regist.registName.length!=11){
						xtip.msg('手机号码必须十一位!',{icon:'w'});
						return false;
				}
				loadid=xtip.load('正在验证中');
				axios.get(link+"liver/regist",{params:{code:this.regist.code,password:this.regist.password,registName:this.regist.registName,type:this.type}}).then(
						res=>{
							if (res.data.data.result=="success"){
								xtip.msg("注册成功!",{icon:'s'});
								xtip.close(loadid);
								this.userlogin.loginName=this.regist.registName;
								this.GoLogin();
							}else {
								xtip.msg("注册失败,可能的原因有:验证码错误/用户已存在/其它错误!",{icon:'w'});
								xtip.close(loadid);
							}
						})
			},UserLogin:function () {//住户登入
				if (this.userlogin.loginName==''){
					xtip.msg('请输入您的登陆账号',{icon:'w'});
					return false;
				}if (this.userlogin.password==''){
					xtip.msg('请输入您的登陆密码',{icon:'w'});
					return false;
				}
				 loadid=xtip.load('正在验证中');
				axios({
					url:link+"liver/login",
					method:"post",
					params:{loginName:this.userlogin.loginName,password:this.userlogin.password}
				}).then(res=>{
					if (res.data.data.result=="success"){
						xtip.msg('登陆成功!',{icon:'s'});
						xtip.close(loadid);
						var loginName=res.data.data.user;
						window.location.href="user_index.html?a="+window.btoa(window.encodeURIComponent(this.userlogin.loginName));
					}else {
						xtip.msg('登陆失败!',{icon:'e'});
						xtip.close(loadid);
					}
				})
			},liverLoginforgetPassword:function () {
				if (this.liverforgetPwdreigstName==''){
					xtip.msg('验证码方式不能为空',{icon:'w'});
					return false;
				}if (isNaN(this.liverforgetPwdreigstName)==false){
					if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.liverforgetPwdreigstName))||this.liverforgetPwdreigstName.length<11) {
						xtip.msg('手机格式不正确', {icon: 'w'});
						return false;
					}
				}else{
						if (!(/^\w+[@]\w+[.][\w.]+$/.test(this.liverforgetPwdreigstName))) {
							xtip.msg('邮箱格式不正确', {icon: 'w'});
							return false;
						}
				}
				loadid=xtip.load('正在发送中');
				this.downTime2(59);
				axios({
					url:link+"/liver/sendCode",
					method:"get",
					params:{registName:this.liverforgetPwdreigstName}
				}).then(res=>{
					if (res.data.data.result=="success"){
						xtip.msg('验证码发送成功,请注意查收',{icon:'s'});
						xtip.close(loadid);
					}else {
						xtip.msg('验证码发送失败',{icon:'e'});
						xtip.close(loadid);
					}
				})
			}, /** 倒计时验证码 **/
			downTime2(num){//发送验证码,倒计时
				if (this.liverforgetPwdreigstName==''){
					xtip.msg('请先输入手机号或邮箱',{times:2});
					return false;
				}
				this.codeObj.title =  num + "秒后重新发送";
				const timer = setInterval(() => {
					num--;
					if (num <= 0) {
						clearInterval(timer);
						this.codeObj.title = "再次获取";
						this.codeObj.status = true;
					} else {
						this.codeObj.title =  num + "秒后重新发送";
						this.codeObj.status = false;
					}
				}, 1000);
				return this.codeObj
			},liverpasswordreset:function () {
				if (this.liverforgetPwdreigstName==''){
					xtip.msg('验证方式不能为空',{iocn:'w'});
					return false;
				}if (this.liverforgetPwdCode==''){
					xtip.msg('验证码不能为空',{icon:'w'});
					return false;
				}
				loadid=xtip.load('正在处理中');
				window.location.href=link+"/liver/to/setpwd?code="+this.liverforgetPwdCode+"&loginName="+this.liverforgetPwdreigstName;
				xtip.close(loadid);
			}

		}

	})
</script>
</html>